<!DOCTYPE html>
<html lang="zxx">
<head>
    <title>个人网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Custom Theme files -->
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
    <!-- font-awesome icons -->
    <link href="css/fontawesome-all.min.css" rel="stylesheet">
    <!-- //Custom Theme files -->
    <!-- online-fonts -->
	<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
   <!-- //online-fonts -->
</head>
<body>
    <div class="sidenav text-center">
		<div class="side_top">
			<img src="images/笑.jpg" alt="news image" class="img-fluid navimg">
			<h1 class="top_hd mt-2"><a href="index.html">ZzzzX</a></h1>
			<p class="top_hdp mt-2">大家笑一笑就好</p>
        </div>
		<!-- header -->
        <header>
			<div class="nav-top">
				<nav class="mnu mx-auto">
                    <label for="drop" class="toggle">菜单</label>
                    <input type="checkbox" id="drop">
						<ul class="menu">
							<li class="active"><a href="#home" class="scroll">首页</a></li>
							 <li class="mt-sm-3"><a href="#about" class="scroll">个人简介</a></li>
							<li class="mt-sm-3"><a href="#services" class="scroll">作品展示</a></li>
							<li class="mt-sm-3"><a href="#news" class="scroll">兴趣爱好</a></li>
                            <li class="mt-sm-3"><a href="#contact" class="scroll">联系方式</a></li>
                        </ul>
				</nav>
			</div>
		</header>
        <!-- //header -->
    </div>
    <div class="main">
        <div class="banner-text-w3ls" id="home">
			<div class="container">
                <div class="mx-auto text-center">
                    <h3>欢迎来到我的个人网站
				</h3>
					<p class="banp mx-auto mt-3">经过镇江极客营一个月的培训，我完成了自己的第一个个人网站  </p>
					<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="#about" role="button">了解更多</a>
                </div>
            </div>
        </div>
		<!-- about -->
<section class="slide-wrapper" id="about">
	<h2 class="w3_head mb-4">个人简介 </h2>
	<h4 class="main_hd"> 我叫张祥，来自湖北武汉 <br>现在是武汉工程大学软件工程专业大三学生</h4>
	<p class="iner mt-md-5"> 我是一个儒雅随和的人，平时看似我不怎么讲话，但是如果你和我混熟了，会发现我是个话痨。我性格算是比较内向，不怎么喜欢表现自己。平时我喜欢运动，乒乓球、羽毛球是我的拿手项目。来镇江实习的这一个月的时间里，我们学习了HTML-CSS，JavaScript，jQuery，Vue，Bootstrap以及微信小程序。其中我掌握的比较好的是HTML-CSS，现在基本能写出一个静态页面，对于JavaScript和jQuery算初步了解，能运用这两门语言写一些基本的脚本，但离熟练掌握还差得远。至于现在比较热门的Vue框架，只能大致看懂还不太会用。微信小程序看着步骤教程能一步步跟着做一个简单的微信小程序。对于这么多的前端技术我只能算刚刚入门，要想走上前端的岗位还有很长的路要走。</p>
</section>
<!-- //about -->
<!-- services -->
<section class="services" id="services">
	<div class="container">
		<h3 class="w3_head mb-4 text-left"> 作品展示</h3>
		<p class="iner mt-md-5 text-left"> 镇江实习的一个月里，在程老师的引导下，我完成了一些网页的设计。虽然这都是一些简单的静态页面，但是都运用了我这一个月来所学到的前端知识，对于刚入门的我来说也是不容易的！下面是我这一个月来的作品展示。 </p>
			<ul class="list-unstyled mt-5">
				<li>
					<div class="row">
					 
						<div class="col-10">
							<a href="./html/诗意生活.html">诗意生活</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
					 
						<div class="col-10">
							<a href="./html/zjwork02.html">个人网站</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						
						<div class="col-10">
							<a href="./html/关于远大.html">关于远大</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
					
						<div class="col-10">
							<a href="./html/复合地板.html">复合地板</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						
						<div class="col-10">
							<a href="./html/小米登录.html">小米登录</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
					
						<div class="col-10">
							<a href="./html/绑定微信.html">绑定微信</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
					 
						<div class="col-10">
							<a href="./html/小米官网.html">小米官网</a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
					 
						<div class="col-10">
							<a href="./响应式木兮地板/木兮地板.html">木兮地板</a>
						</div>
					</div>
				</li>
			</ul>
	</div>
</section>
		<!-- //services -->
		<!-- news -->
       <div class="news" id="news">
		<h3 class="w3_head mb-4 text-left"> 兴趣爱好</h3>
		<p class="iner mt-md-5 text-left"> 我的兴趣爱好非常广泛，但主要在于三个:下棋、篮球和跑步。</p>
				<div class="row news-grids-left mt-5">
					<div class="col-lg-5 news_top">
						<img src="images/象棋.jpg" alt="news image" class="img-fluid" style="height:200px">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>下棋</h5>
						<p class="mt-3">六岁时第一次接触中国象棋,从那时便喜欢上了下棋。喜欢在无聊的时候找人下一盘，通过下棋也结实了很多朋友，很享受对棋局中每个盘面思考的过程。 </p>
					</div>
				</div>
				<div class="row news-grids-middle">
					<div class="col-lg-5 news_top">
						<img src="images/篮球.jpg" alt="news image" class="img-fluid" style="height: 200px">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>篮球</h5>
						<p class="mt-3">喜欢看NBA,也喜欢玩篮球有关的游戏，最喜欢的篮球类游戏就是这款NBA2K18,平时作业写完之后便会打两把。</p>
					</div>
				</div>
				<div class="row news-grids-right">
					<div class="col-lg-5 news_top">
						<img src="images/跑步.png" alt="news image" class="img-fluid" style="height:200px">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>跑步</h5>
						<p class="mt-3">跑步是我在大学期间唯一的锻炼身体的方式，我喜欢晚上一个人带上耳机在操场上跑步。在跑步的过程中，一天的烦心事都能抛到脑后，压力得到了释放。</p>
					</div>
				</div>	
				
		</div>
<!-- //news -->
<!-- contact -->
	 <section class="wedo" id="contact">
	<h3 class="w3_head mb-4 text-left"> 联系方式</h3>
	<p class="iner mt-md-5 text-left">如果你也对前端感兴趣并且和我有相同的兴趣爱好，可以和我取得联系。 </p>
		 
			<div id="contactteam">
				<ul class="contact" >
					<li class="phone">
						<img src="images/phone1.png" alt="">
						<img src="images/phonenumber.png" alt="" class="hidden">
					</li>
					<li class="wechat">
						<img src="images/wechat.png" alt="">
						<img src="images/wechatcode.png" alt="" class="hidden">
					</li>
					<li class="qq">
						<img src="images/qq.png" alt=""><br>
						<img src="images/qqcode.png" alt="" class="hidden">
					</li>
				</ul>
				
			</div>
		
			<div class="cpy-right text-center" style="clear:both">
				<p>Copyright &copy; 2019.Company name All rights reserved ZzzzX</p>
			</div>
	</section>
	 <!-- //contact -->
    </div>
   
</body>
</html>